import { Component } from 'react'
function withControlledState(WrappedComponent) {
  return class extends Component {
    constructor(props) {
      super(props)
      this.state = {
        value: '',
      }

      // this.onChange = this.debounce(this.handleValueChange())
    }

    handleValueChange = (e) => {
      // console.log(e.target.value, '---')
      this.setState({
        value: e.target.value,
      })
    }

    // debounce = (func) => {
    //   // console.log('-----:', func)
    //   let timer = null
    //   return (e) => {
    //     // console.log(e.target.value, ' params')
    //     if (timer) clearTimeout(timer)
    //     timer = setTimeout(() => {
    //       console.log('-------')
    //       func && func(e)
    //     }, 1000)
    //   }
    // }

    render() {
      const newProps = {
        controlledProps: {
          value: this.state.value,
          onChange: this.handleValueChange,
        },
      }
      return <WrappedComponent {...this.props} {...newProps} />
    }
  }
}

export default withControlledState
